<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>提交订单</title>
    <link rel="stylesheet" href="mui/css/mui.css">
    <script src="mui/js/mui.js"></script>
    <script src="js/jquery-1.11.3.js"></script>
    <link rel="stylesheet" href="css/style.css?v1.1.2">
    <style>
        body{background-color: white;padding-bottom: 6rem;}
        .payment-list{font-size: 1.6rem;text-align: center;background-color: white;}
        .payment-list>div{padding: 1rem 0;}
        .payment-list>div:first-child{background-color: #3290FF;color: white;}
        .payment-list .mui-row{border-bottom: 1px solid #EEEEEE}
    </style>
</head>
<body onscroll="swipeUp()">
<div class="mui-content payment-list">
    <div class="mui-row">
        <div class="mui-col-xs-4">日期</div>
        <div class="mui-col-xs-4">项目</div>
        <div class="mui-col-xs-4">金额</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-19</div>
        <div class="mui-col-xs-4">电费</div>
        <div class="mui-col-xs-4">888.00元</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-18</div>
        <div class="mui-col-xs-4">管理费</div>
        <div class="mui-col-xs-4">666.00元</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-18</div>
        <div class="mui-col-xs-4">管理费</div>
        <div class="mui-col-xs-4">666.00元</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-18</div>
        <div class="mui-col-xs-4">管理费</div>
        <div class="mui-col-xs-4">666.00元</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-18</div>
        <div class="mui-col-xs-4">管理费</div>
        <div class="mui-col-xs-4">666.00元</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-18</div>
        <div class="mui-col-xs-4">管理费</div>
        <div class="mui-col-xs-4">666.00元</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-18</div>
        <div class="mui-col-xs-4">管理费</div>
        <div class="mui-col-xs-4">666.00元</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-18</div>
        <div class="mui-col-xs-4">管理费</div>
        <div class="mui-col-xs-4">666.00元</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-18</div>
        <div class="mui-col-xs-4">管理费</div>
        <div class="mui-col-xs-4">666.00元</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-18</div>
        <div class="mui-col-xs-4">管理费</div>
        <div class="mui-col-xs-4">666.00元</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-18</div>
        <div class="mui-col-xs-4">管理费</div>
        <div class="mui-col-xs-4">666.00元</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-18</div>
        <div class="mui-col-xs-4">管理费</div>
        <div class="mui-col-xs-4">666.00元</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-18</div>
        <div class="mui-col-xs-4">管理费</div>
        <div class="mui-col-xs-4">666.00元</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-18</div>
        <div class="mui-col-xs-4">管理费</div>
        <div class="mui-col-xs-4">666.00元</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-18</div>
        <div class="mui-col-xs-4">管理费</div>
        <div class="mui-col-xs-4">666.00元</div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-4">2019-02-18</div>
        <div class="mui-col-xs-4">管理费</div>
        <div class="mui-col-xs-4">666.00元</div>
    </div>
</div>
<div class="notice-details-bottom" style="display:none;">— 上滑加载更多 —</div>
<script src="layer_mobile/layer.js"></script>
<script>
    let isLoad = true,bottomElem = $(".notice-details-bottom");
    function swipeUp() {
        let elemHeight=parseInt($('body').css("height"));
        let scrollTop,maxScroll;
        scrollTop = $(window).scrollTop();
        maxScroll = elemHeight - $(window).height();
        if(scrollTop >= maxScroll || elemHeight<$(window).height()){
            if(isLoad){
                mui('html').on("swipeup","body",loadMore);
                bottomElem.show()
            }else{
                bottomElem.show().text('— 没有更多了 —');
            }
        }else{
            mui('html').off("swipeup","body");
            bottomElem.hide()
        }
    }
    function loadMore() {
        console.log("你正在向上滑动");
        //模拟数据
        let html = `
            <div class="mui-row">
            <div class="mui-col-xs-4">8888-88-88</div>
            <div class="mui-col-xs-4">新加载项</div>
            <div class="mui-col-xs-4">888.88元</div>
        </div>
        `;

        //请求
        /*
                $.ajax({
                    url:"",
                    type:"POST",
                    dataType:'JSON',
                    beforeSend:function(){
                        layer.open({
                            type: 2
                            ,content: '加载中'
                        });
                    },
                    success:function () {
                        layer.closeAll();
                        $(".notice-details-bottom").hide();
                        $(".mui-content").append(html+html);
                        mui('html').off("swipeup","body");
                    },
                    error:function () {
                        layer.closeAll();
                    }
                });
                */
        //测试模拟请求用
        layer.open({
            type: 2
            ,content: '加载中'
        });
        setTimeout(function () {
            bottomElem.hide();
            layer.closeAll();
            $(".mui-content").append(html+html);
            isLoad =false;//是否还有数据
            mui('html').off("swipeup","body");
        },3000)
        //#End
    }
</script>
</body>
</html>